18. Использование Electron

Что такое Electron?

Electron — это фреймворк для создания кроссплатформенных desktop-приложений с использованием веб-технологий: HTML, CSS и JavaScript. Electron позволяет разрабатывать приложения для Windows, macOS и Linux, используя знакомые инструменты веб-разработки.

Запуск заготовленного проекта Electron

В этом занятии мы будем работать с заранее подготовленным проектом Node.js, который уже содержит всё необходимое для работы с Electron. Вам не нужно устанавливать Electron, так как всё уже настроено.

Шаг 1: Подготовка проекта

  1. Скопируйте проект с диска "Y":

    • Перейдите на диск "Y:/Специальность/Курсы/Electron" и найдите папку "Demo" с заготовленным проектом Electron.
    • Скопируйте эту папку на ваш сетевой диск.

  2. Откройте проект в редакторе кода:

    • Откройте скопированную папку в вашем любимом редакторе кода (например, Visual Studio Code).

Шаг 2: Структура проекта

Заготовленный проект уже содержит необходимые файлы и настройки. Вот пример структуры проекта:

electron-project/
├── node_modules/       # Установленные зависимости
├── package.json        # Файл с настройками проекта и зависимостями
├── index.js             # Главный процесс Electron
├── renderer.js         # Рендерер-процесс (логика интерфейса)
├── index.html          # HTML-файл для интерфейса приложения
├── styles.css          # CSS-файл для стилей интерфейса
└── assets/             # Папка для дополнительных ресурсов (изображения, иконки и т.д.)

Шаг 3: Запуск проекта

  1. Откройте терминал в папке проекта:

    • В редакторе кода откройте встроенный терминал или используйте системный терминал.
    • Перейдите в папку проекта с помощью команды cd.

  2. Запустите проект:

    • В терминале введите команду для запуска проекта: 
      npm start
    • Эта команда запустит Electron и откроет окно вашего приложения.

  3. Либо запустите проект через F5 в режиме отладки "Main" через Visual Studio Code

Основные файлы проекта

1. index.js — Главный процесс Electron

Главный процесс отвечает за создание окна приложения и управление жизненным циклом приложения. В этом файле уже настроено создание окна и загрузка index.html.

Пример содержимого index.js:

Поскольку основной процесс работает на Node.js, вы можете импортировать их как модули CommonJS в начале вашего файла index.js.

const { app, BrowserWindow } = require('electron')

Затем добавьте функцию createWindow(), которая загружает index.html в новый экземпляр BrowserWindow.

const createWindow = () => {
    const win = new BrowserWindow({
        width: 800,
        height: 600
    })
    win.loadFile('index.html')
}

Далее вызовите функцию createWindow(), чтобы открыть окно.

В Electron создание окон браузера возможно только после срабатывания события [ready](https://www.electronjs.org/ru/docs/latest/api/app#event-ready) модуля app. Дождаться этого события можно с помощью API [app.whenReady()](https://www.electronjs.org/ru/docs/latest/api/app#appwhenready). Вызовите createWindow() после того, как whenReady() выполнит свой Promise.

app.whenReady().then(() => {  createWindow()})

2. index.html — Интерфейс приложения

Этот файл содержит HTML-код для интерфейса вашего приложения. Вы можете изменить его, чтобы настроить внешний вид приложения.

Пример содержимого index.html:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Моё Electron-приложение</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Привет, Electron!</h1>
    <p>Это моё первое desktop-приложение.</p>
    <script src="renderer.js"></script>
</body>
</html>

3. renderer.js — Логика интерфейса

Этот файл содержит JavaScript-код, который выполняется в контексте веб-страницы (в рендерер-процессе). Здесь можно добавить интерактивность и логику для вашего приложения.

Пример содержимого renderer.js:

console.log("Рендерер-процесс запущен!");

document.querySelector('h1').addEventListener('click', () => {
    alert('Вы нажали на заголовок!');
});

Практическое задание

  1. Измените интерфейс приложения:

    • Откройте файл index.html и измените текст заголовка и параграфа.
    • Добавьте новые элементы, например, кнопку или изображение.

  2. Добавьте интерактивность:

    • В файле renderer.js добавьте обработчик события для кнопки, чтобы при нажатии выводилось сообщение в консоль или всплывающее окно.

  3. Измените стили:

    • Откройте файл styles.css и измените цвет фона, шрифты или другие стили интерфейса.

Заключение

Electron — это мощный инструмент для создания desktop-приложений с использованием веб-технологий. В этом занятии мы рассмотрели, как работать с заранее подготовленным проектом Electron, не устанавливая его вручную. Вы можете изменять и расширять этот проект, чтобы создавать свои собственные приложения.